import React, { useEffect } from "react";
import { Breadcrumb } from "antd";
import { useLocation, Link } from "react-router-dom";
import {ForwardFilled} from "@ant-design/icons"
import "./bread.scss"
const breadcrumbNameMap = {
  "/article": "文章管理",
  "/home": "首页",
  "/article/article-manage": "文章管理",
  "/article/tag-manage": "标签管理",
  "/article/cate-manage": "分类管理",
};
export default function Blbreadcrumb() {
  const location = useLocation();
  const pathSnippets = location.pathname.split("/").filter((i) => i);
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join("/")}`;
    console.log(url,"url--")
    return {
      key: url,
      title: <Link to={url}>{breadcrumbNameMap[url]}</Link>,
    };
  });

  console.log(extraBreadcrumbItems,"extra")

  return <Breadcrumb separator={<ForwardFilled/>} items={extraBreadcrumbItems}></Breadcrumb>;
}
